<template>
<div>
  <group>
    <cell title="类型">
      <checker v-model="sctype" default-item-class="demo5-item" selected-item-class="demo5-item-selected">
        <checker-item :value="item" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>
      </checker>
    </cell>  
  </group>
  <group>
    <datetime v-model="stime" placeholder="选择出发时间" :start-date="startDate" :end-date="endDate" format="YYYY-MM-DD HH:mm" title="出发时间" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消" :minute-list="['00', '10', '20', '30', '40', '50']"></datetime>
    <x-input v-model="saddr" title="起点" placeholder="输入出发地" novalidate  :show-clear="false" placeholder-align="right" text-align="right"></x-input>
    <x-input v-model="eaddr" title="终点" placeholder="输入目的地" novalidate  :show-clear="false" placeholder-align="right" text-align="right"></x-input>
    <popup-radio v-show="sctype.key==1" title="车型" :options="carlist" v-model="cartype" placeholder="选择车型"></popup-radio>
    <x-number v-show="sctype.key==1" v-model="people" :min="0" :max="6" title="座位数"></x-number>
    <x-input v-model="cname" title="联系人" placeholder="输入联系人姓名" novalidate  :show-clear="false" placeholder-align="right" text-align="right"></x-input>
    <x-input v-model="phone" title="手机号" type="tel" placeholder="输入手机号码"  :show-clear="false" placeholder-align="right" text-align="right"></x-input>
    <x-textarea :max="20" v-model="other" placeholder="其他说明"></x-textarea>
    <x-button type="primary" action-type="button" style="width:50%;margin:20px auto;" @click.native="postData">提  交</x-button>
  </group>



</div>
</template>

<script>

import {dateFormat, Group,Cell, XNumber,Checker, CheckerItem, XSwitch, Divider,Datetime,XInput,PopupRadio,XTextarea,XButton} from 'vux'

export default {
  name: 'Pub',
  components: {
    Group,
    Cell,
    XNumber,
    Checker, 
    CheckerItem,
    XSwitch,
    Divider,
    Datetime,
    XInput,
    PopupRadio,
    XTextarea,
    XButton
  },
  filters: {
    dateFormat
  },
  computed: {
    startDate: function () {
      return dateFormat(new Date(), 'YYYY-MM-DD')
    },
    endDate: function(){
      var myDate=new Date()
      myDate.setDate(myDate.getDate()+10)
      return dateFormat(myDate, 'YYYY-MM-DD')
    }
  },
  data () {
    return {
      items1: [{
        key: '1',
        value: '我是车主'
      }, {
        key: '2',
        value: '我是乘客'
      }],
      people: 3,
      sctype: 0,
      cartype: '',
      saddr: '',
      eaddr: '',
      cname: '',
      phone: '',
      other: '',
      stime:'',
      carlist: ['轿车', '越野', '商务车'],
      changeValue: 0,
      roundValue: 0
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    },
    postData() {
      this.$http.get(GV.ROOT + 'pub/ajax_pub.html',{
        params: {
          type:   this.sctype.key,
          saddr:  this.saddr,
          eaddr:  this.eaddr,
          stime:  this.stime,
          cartype: this.cartype,
          people:   this.people, 
          other:  this.other,
          name:   this.cname,
          phone:  this.phone
        }
      }).then(function(response){
          // 响应成功回调
          
      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.demo5-item {
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #efefef;
  background-color: #efefef;
  color:#b3b3b3;
  margin-right: 6px;
  font-size: 14px;
  padding-left:30px;
  padding-right:10px;
  background: #efefef url(../assets/input-unchecked.png) no-repeat 8px 5px;
}
.demo5-item-selected {
  background-color: #09bb07;
  color: #fff;
  background: #09bb07 url(../assets/input-checked.png) no-repeat 8px 5px;
  border-color: #09bb07;

}
</style>
